<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <button @click="changeInfo" type="">修改一个人的信息</button><br /><br />
  <button @click="setHello" type="">我可以传值</button>
</template>

<script>
import { reactive } from "vue";

export default {
  name: "Demo",
  props: ["msg", "fond"],
  emits:['hello'],
  setup(props, context) {
    // console.log('props :>> ', props); 父组件传给子

    // console.log("context :>> ", context.attrs); //详见vue2中的attrs

    // console.log("context :>> ", context.emit); //分发自定义事件的函数 子组件传给父

    console.log('context :>> ', context.slots);


    let person = reactive({
      name: "李四",
      age: 18,
    });

    function changeInfo() {
      person.name = "张三";
      person.age = 27;
    }

    function setHello() {
      context.emit("hello", "陈剑锋");
    }

    return {
      changeInfo,
      person,
      setHello,
    };
  },
};
</script>
